<template>
  <div class="bindings-container">
    <!-- 顶部导航栏 -->
    <div class="navbar">
      <div class="left">
        <el-button
          type="primary"
          plain
          size="small"
          @click="router.back()"
        >
          返回
        </el-button>
        <span class="title">绑定详情</span>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div v-if="loading" class="loading-state">
        <el-skeleton :rows="3" animated />
      </div>
      <div v-else-if="bindings.length === 0" class="empty-state">
        <el-empty
          description="暂无绑定信息"
          :image-size="100"
        >
          <template #image>
            <el-icon :size="60" color="#909399"><Connection /></el-icon>
          </template>
        </el-empty>
      </div>
      <div v-else class="bindings-list">
        <el-card
          v-for="item in bindings"
          :key="item.id"
          class="binding-card"
          shadow="hover"
        >
          <div class="binding-info">
            <div class="url-name">{{ item.url_name }}</div>
            <div class="url">{{ item.url }}</div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Connection } from '@element-plus/icons-vue'
import { getUserBindings } from '@/api/user'

const router = useRouter()
const bindings = ref([])
const loading = ref(false)

// 获取绑定信息
const fetchBindings = async () => {
  const userStr = localStorage.getItem('user')
  if (!userStr) {
    ElMessage.error('请先登录')
    router.push('/login')
    return
  }

  try {
    const user = JSON.parse(userStr)
    loading.value = true
    console.log('正在获取用户绑定信息，用户ID:', user.id)
    const res = await getUserBindings(user.id)
    console.log('获取到的绑定信息:', res)
    if (res.code === 0 && res.data) {
      bindings.value = res.data
    } else {
      ElMessage.error(res.message || '获取绑定信息失败')
    }
  } catch (error) {
    console.error('获取绑定信息失败：', error)
    ElMessage.error('获取绑定信息失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchBindings()
})
</script>

<style lang="scss" scoped>
.bindings-container {
  min-height: 100vh;
  background-color: #f5f7fa;

  .navbar {
    height: 60px;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    .left {
      display: flex;
      align-items: center;
      gap: 16px;

      .title {
        font-size: 16px;
        color: #303133;
        font-weight: 500;
      }
    }
  }

  .main-content {
    padding: 84px 24px 24px;
    min-height: calc(100vh - 60px);

    .loading-state {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    .empty-state {
      height: calc(100vh - 108px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bindings-list {
      max-width: 800px;
      margin: 0 auto;
      display: grid;
      gap: 16px;

      .binding-card {
        transition: transform 0.3s ease;

        &:hover {
          transform: translateY(-4px);
        }

        .binding-info {
          .url-name {
            font-size: 16px;
            color: #303133;
            font-weight: 500;
            margin-bottom: 8px;
          }

          .url {
            font-size: 14px;
            color: #606266;
            word-break: break-all;
          }
        }
      }
    }
  }
}

// 响应式设计
@media screen and (max-width: 768px) {
  .bindings-container {
    .main-content {
      padding: 84px 16px 16px;
    }
  }
}
</style> 